<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link href="/erp/assets/css/bootstrap.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/erp/css/style.css"/>
    <link rel="stylesheet" href="/erp/assets/css/ace.min.css"/>
    <link rel="stylesheet" href="/erp/assets/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/erp/Widget/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <link href="/erp/Widget/icheck/icheck.css" rel="stylesheet" type="text/css"/>
    <!--[if IE 7]>
    <link rel="stylesheet" href="/erp/assets/css/font-awesome-ie7.min.css"/>
    <![endif]-->
    <!--[if lte IE 8]>
    <link rel="stylesheet" href="/erp/assets/css/ace-ie.min.css"/>
    <![endif]-->
    <script src="/erp/js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="/erp/assets/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="/erp/assets/js/typeahead-bs2.min.js" type="text/javascript"></script>
    <!-- page specific plugin scripts -->
    <script src="/erp/assets/js/jquery.dataTables.min.js" type="text/javascript"></script>
    <script src="/erp/assets/js/jquery.dataTables.bootstrap.js" type="text/javascript"></script>
    <script type="text/javascript" src="/erp/js/H-ui.js"></script>
    <script type="text/javascript" src="/erp/js/H-ui.admin.js"></script>
    <script src="/erp/assets/layer/layer.js" type="text/javascript"></script>
    <script src="/erp/assets/laydate/laydate.js" type="text/javascript"></script>
    <script type="text/javascript" src="/erp/Widget/zTree/js/jquery.ztree.all-3.5.min.js"></script>
    <script src="/erp/js/lrtk.js" type="text/javascript"></script>
    <style type="text/css">
        .imgg img {
            max-width: 100px
        }
    </style>
    <title>商品_信息管理</title>
</head>
<body>
<div class=" page-content clearfix">
    <div id="products_style">
        <form id="queryForm" action="/product/list" method="post" class="search_style">

            <ul class="search_content clearfix">
                <li><label class="l_f">商品名称</label><input name="productName" type="text" class="text_add"
                                                          placeholder="请输入商品名称"
                                                          style=" width:250px"/></li>
                <li><label class="l_f">商品种类</label>
                    <select class="select" name="status">
                        <option value="">请选择</option>
                        <option value="1">普通商品</option>
                        <option value="2">积分商品</option>
                    </select></li>

                <li style="width:90px;">
                    <button id="btn" type="button" class="btn_search"><i class="icon-search"></i>查询</button>
                </li>
            </ul>
        </form>
        <div class="border clearfix">
       <span class="l_f">
        <a href="/product/good_add" title="添加商品" class="btn btn-warning Order_form"><i class="icon-plus"></i>添加商品</a>
       </span>

        </div>
        <table class="table table-striped table-bordered table-hover" id="sample-table">
            <thead>
            <tr>

                <th width="80px">商品编号</th>
                <th width="120px">商品名称</th>
                <th width="100px">商品图片</th>
                <th width="100px">商品种类</th>
                <th width="100px">成本价(￥)</th>
                <th width="100px">零售价(￥)</th>
                <th width="80px">积分</th>
                <th width="100px">类别(一级)</th>
                <th width="100px">类别(二级)</th>
                <th width="100px">类别(三级)</th>
                <th width="155px">添加时间</th>
                <th width="80px">审核状态</th>
                <th width="70px">商品状态</th>
                <th width="210px">操作</th>
            </tr>
            </thead>

        </table>
    </div>
</div>
</body>
</html>
<script>
    jQuery(function ($) {
        var oTable1 = $('#sample-table').dataTable({
            iDisplayLength: 5, //默认显示的记录数
            aLengthMenu: [5, 10, 15, 20, 50, 100], //更改显示记录数选项
            bFilter: false, //是否启动过滤、搜索功能
            "bStateSave": true,//状态保存
            "serverSide": true,		//打开服务器模式
            "ajax": {
                "url": "/product/list",
                "type": "POST",
                dataSrc: "data",
                data: function (d) {
                    var param = {};
                    param.draw = d.draw;
                    param.start = d.start;
                    param.length = d.length;
                    var formData = $("#queryForm").serializeArray();//把form里面的数据序列化成数组
                    formData.forEach(function (e) {
                        param[e.name] = e.value;
                    });
                    return param;//自定义需要传递的参数。
                },
            },
            "columns": [
                {"data": 'id'},
                {"data": 'productName'},
                {
                    "data": 'picture', "render": function (data) {
                        return '<img src="/upload/' + data + '" height="50px">'
                    }
                },
                {"data": 'productType'},
                {"data": 'costPrice'},
                {"data": 'retailPrice'},
                {"data": 'integral'},
                {"data": 'sortName'},
                {"data": 'sortsName'},
                {"data": 'sortssName'},
                {"data": 'createTime'},
                {"data": 'examineStates'},
                {
                    "data": 'productStates', "render": function (data) {
                        if (data === "已上架") {
                            return /*<![CDATA[*/"<span class='label label-success radius'>已上架</span>"/*]]>*/;
                        } else if (data === "已下架") {
                            return /*<![CDATA[*/"<span class='label label-defaunt radius' style='background-color: #8799a4'>已下架</span>"/*]]>*/;
                        }
                    }
                },
                {"data": null}
            ], "columnDefs": [
                {
                    // targets用于指定操作的列，从第0列开始，-1为最后一列，这里第六列
                    // return后边是我们希望在指定列填入的按钮代码
                    "targets": -1,
                    "render": function (data, type, full, meta) {

                        if (data.productStates == "已上架") {
                            return /*<![CDATA[*/"<div id='check' class=\"btn btn-xs btn-success \"><i class=\"icon-ok bigger-120\"></i></div> \n" +
                                "\t\t\t  <div id='select' title='查看商品属性' class=\"btn btn-xs btn-warning\"  ><i class=\"icon-list bigger-120\"></i></div>\n" +
                                "\t\t  <div id='update' title='编辑' class=\"btn btn-xs btn-info\" ><i class='icon-edit bigger-120'></i></div>"/*]]>*/
                        } else {
                            return /*<![CDATA[*/"<div id='check' class=\"btn btn-xs \"><i class=\"icon-ok bigger-120\"></i></div> \n" +
                                "\t\t\t  <div id='select' title='查看商品属性' class=\"btn btn-xs btn-warning\"  ><i class=\"icon-list bigger-120\"></i></div>\n" +
                                "\t\t  <div id='update' title='编辑' class=\"btn btn-xs btn-info\" ><i class='icon-edit bigger-120'></i></div>"/*]]>*/
                        }

                    }
                }
            ],
        });

        $("table tbody").on("click", "#update", function () {
            var row = $("table tr").index($(this).closest("tr"));
            var id = $("table").find("tr").eq(row).find("td").eq(0).text();
            window.location.href = "/product/productById?id=" + id;
        });
        $("table tbody").on("click", "#check", function () {
            var row = $("table tr").index($(this).closest("tr"));
            var id = $("table").find("tr").eq(row).find("td").eq(0).text();
            var states = $("table").find("tr").eq(row).find("td").eq(12).text();
            var states1 = $("table").find("tr").eq(row).find("td").eq(11).text();

            if (states == "已上架" && states1 == "通过") {
                layer.confirm('确定下架？', {
                    btn: ['确定', '取消'] //按钮
                }, function () {
                    $.ajax({
                        url: '/product/productStates1?id=' + id,
                        contentType: 'application/json',           //表示我们发送给服务器数据是json格式
                        dataType: 'json',                          //表示服务器返回给我们的数据是json格式
                        success: function (data) {
                            if (data.result == true) {
                                // 提交成功后的回调
                                layer.msg('下架成功', {icon: 1, time: 1}, function () {
                                    oTable1.fnDraw();
                                });
                            } else {
                                layer.msg('下架失败！', {icon: 2,});
                            }
                        }
                    })
                })
            } else if(states == "已下架" && states1 == "通过"){
                layer.confirm('确定上架？', {
                    btn: ['确定', '取消'] //按钮
                }, function () {
                    $.ajax({
                        url: '/product/productStates2?id=' + id,
                        contentType: 'application/json',           //表示我们发送给服务器数据是json格式
                        dataType: 'json',                          //表示服务器返回给我们的数据是json格式
                        success: function (data) {
                            if (data.result == true) {
                                // 提交成功后的回调
                                layer.msg('上架成功', {icon: 1, time: 1}, function () {
                                    oTable1.fnDraw();
                                });
                            } else {
                                layer.msg('上架失败！', {icon: 2,});
                            }
                        }
                    })
                })
                return false;
            }
        });
        $("table tbody").on("click", "#select", function () {
            var row = $("table tr").index($(this).closest("tr"));
            var id = $("table").find("tr").eq(row).find("td").eq(0).text();

            layer.open({
                type: 2,
                title: '查看详情',
                shadeClose: true,
                shade: 0.8,
                area: ['50%', '100%'],
                content: '/product/productByIds?id=' + id,//iframe的url
                end: function () {
                    oTable1.fnDraw(false);
                }
            });

        });

        $("table tbody").on("click", "#details", function () {
            //获取行
            var row = $("table tr").index($(this).closest("tr"));
            //获取某列（从0列开始计数）的值
            var id = $("table").find("tr").eq(row).find("td").eq(0).text();
            window.location.href = "/procurement/details?id=" + id;
        });

        $("#btn").click(function () {
            oTable1.fnDraw();
        })
    })

</script>
